<template>
	<view :data-theme="themeStyle">
		<view class="content" :class="iphoneX?'active':''">
			<view class="head-wrap color-base-bg">
				<!-- :style="{backgroundImage:`url(${$util.img('public/uniapp/street/street_bg.png')})`}" -->
				<view class="u-navbar">
					<view class="u-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
					<view class="u-navbar-inner">
						<view class="u-navbar-location" @click="$util.redirectTo('/otherpages/index/city/city')">
							<text class="iconfont iconzuobiao" style="color:#FFFFFF"></text>
							<text class="u-navbar-city">{{city}}</text>
						</view>
						<view class="u-navbar-title">同城</view>
					</view>
				</view>
				<view class="search-wrap">
					<view class="flex-item input-wrap">
						<text class="iconfont iconIcon_search" @click.stop="search()"></text>
						<input class="uni-input" maxlength="50" v-model="keyword" confirm-type="search"
							@confirm="search()" placeholder="请输入您要搜索的店铺" />
					</view>
				</view>
				<view class="">
					<swiper class="classify-swiper" :style="[swiperType]" :indicator-dots="false" :autoplay="false">
						<swiper-item class="classify-swiper-item" v-for="(group,index) in classifyPage" :key="index">
							<view class="classify-cta">
								<view class="classify" @click="turnClassify(item.category_id)"
									:class="{active:item.category_id === category_id}" v-for="item in group"
									:key="item.category_id">
									<block v-if="item.image">
										<image class="classify-img" :src="$util.img(item.image)" mode="scaleToFill">
										</image>
									</block>
									<block v-else>
										<image class="classify-img" :src="$util.getDefaultImage().default_shop_img"
											mode="scaleToFill" />
									</block>
									<view class="classify-name">{{item.category_name}}</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="sort">
				<view class="sort-item" :class="{active:orderType === item.value}" v-for="(item,index) in sortData"
					:key="index" @click="sortTabClick(item.value)">{{item.text}}</view>
			</view>
			<mescroll-uni :top="scroollTop" ref="mescroll" @getData="getShopList">
				<block slot="list">
					<view class="shop-list-box">
						<view class="shop-list">
							<block v-for="(item,key) in shopList" :key="key">
								<view class="shop-item" @click="toDetail(item)">
									<block v-if="item.avatar">
										<image class="shop-image" :src="$util.img(item.avatar)" mode="scaleToFill">
										</image>
									</block>
									<block v-else>
										<image class="shop-image" :src="$util.getDefaultImage().default_shop_img"
											mode="aspectFit" />
									</block>
									<view class="shop-info">
										<view class="shop-name-row">
											<view class="shop-name">{{item.site_name}}</view>
											<view class="shop-distance">{{ item.distance}}</view>
										</view>
										<view class="shop-row">
											<view class="shop-score">
												<text class="iconfont iconxingxing"></text>
												<text
													class="shop-score-value">{{item.composite_score}}{{ $lang('score') }}</text>
											</view>
											<view class="shop-classify">{{ $lang('main') }}：{{ item.category_name }} |
												{{ item.sub_num }}人关注
											</view>
										</view>
										<view class="shop-locate">{{item.full_address}}{{item.address}}</view>
										<!-- <view class="shop-contribution">消费贡献值比{{item.point_rate}}%</view> -->
									</view>
								</view>
							</block>
						</view>
					</view>
					<view class="empty" v-if="!shopList.length">
						<ns-empty :fixed="!1" :isIndex="!1" text="暂未查询到店铺信息~"></ns-empty>
					</view>
				</block>
			</mescroll-uni>
			<loading-cover ref="loadingCover"></loading-cover>
			<!-- 底部tabBar -->
			<diy-bottom-nav :siteId="siteId"></diy-bottom-nav>
		</view>
	</view>

</template>

<script>
	import globalConfig from '@/common/js/golbalConfig.js';
	import street from '../public/js/street.js';

	export default {
		components: {},
		computed: {
			themeStyle() {
				return 'theme-' + this.$store.state.themeStyle
			},
			starColor() {
				return this.$store.state.baseColor
			},
			customstyle() {
				let data = {};
				data.background = 'transparent';
				data.marginTop = '24rpx';
				data.marginBottom = '24rpx';
				data.padding = '0rpx';
				data.height = '280rpx';
				return data;
			},
			bgColor() {
				let str = '';
				if (this.diyData && this.diyData.global) {
					str = this.diyData.global.bgColor;
				}
				return str;
			},
			classifyPage() {
				let len = this.classifies.length;
				let array = []
				for (let i = 0; i < len; i = i + 10) {
					let start = i;
					let end = start + 10;
					if (end > len) {
						end = len
					}
					array.push(this.classifies.slice(start, end))
				}

				return array;
			}
		},
		mixins: [street, globalConfig]
	};
</script>

<style lang="scss">
	@import '../public/css/street.scss';
</style>

<style lang="scss" scoped>
	/deep/ .uni-scroll-view-content {
		// background: #ffffff;
	}

	.content /deep/ .mescroll-upwarp {
		padding-bottom: 150rpx;
	}

	.content.active /deep/ .mescroll-upwarp {
		padding-bottom: 220rpx;
	}
</style>